<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/src/api.js"></script>
    <title>注册</title>
    <style>
        .form {
            width: 480px;
            margin: 40px 36.5% 0 auto;
        }
        .title {
            text-align: left;
            font-family: "Microsoft YaHei";
            color: #409EFF;
            text-indent: 24px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-dialog
                title="提示"
                :visible.sync="showDialog"
                width="30%">
            <span>注册成功，{{sec}}秒后转跳到登录</span>
        </el-dialog>
        <div class="form">
            <h1 class="title">注册</h1>
            <el-form label-width="80px" :model="form">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="form.confirmPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <div style="width: 50%; margin: 0 auto;transform: translateX(40px)" >
                    <el-button style="width: 100%" type="primary" @click="reg">注册</el-button>
                    <el-link type="primary" href="login.html" style="margin: 10px 0 0 60px;">已有账号，前往登录</el-link>
                </div>
            </el-form>
        </div>
    </div>
<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                username: '',
                password: '',
                confirmPassword: '',
                headImage: '',
                email: ''
            },
            showDialog: false,
            sec: 3
        },
        methods: {
            reg() {
                const form = this.form
                if (form.password !== form.confirmPassword) {
                    this.$alert("两次密码不一致！")
                    return
                }
                //发送post请求并附带表单参数，用this.form作为user的内容，直接调用Api的方法就能拿到axios的请求配置
                axios(Api.register(this.form)).then(e => {
                    // 打开对话框
                    this.showDialog = true
                    //间隔定时器秒数记录一秒钟-1s
                    setInterval(() => {
                        this.sec = this.sec - 1
                        if (this.sec === 0) {
                            window.location.href = "/login.html"
                        }
                    }, 1000)
                }).catch(e => {
                    this.$alert(e.response.data.message)
                })
            }
        }
    })
</script>
</body>

</html>